<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="搜索">
          <el-input placeholder="搜索" v-model="formInline.user"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectId">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            :action="host"
            :on-success="handleSuccess"
            :on-error="handleError"
          >
            <el-button type="primary">添加图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="Id" width="50">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.pictureName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px"
            ><img :src="scope.row.picturePath" alt=""
          /></span>
        </template>
      </el-table-column>
      <el-table-column label="图片状态" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="scope.row.status != '展示'"
            @click="handleEdit(scope.$index, scope.row)"
            >展示</el-button
          >
          <el-button
            size="mini"
            v-else
            @click="handleStatus(scope.$index, scope.row)"
            >不展示</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        background
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style>
.el-upload-list__item.is-success .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list__item-name {
  display: none;
}
</style>

<script>
import { GetPicture, getById, updatePut, deleteId } from "../api/picture";

export default {
  data() {
    return {
      //图片处理
      host:this.$host+"picture/files",
      //搜索框绑定的数据
      formInline: {
        user: "",
      },
      //数据表格绑定的数据
      tableData: [],
      //分页
      pager: {
        pageIndex: 1, // 页码
        pageSize: 10, // 页面大小（每页项目的数量）
        rowsTotal: 30, // 总记录数
      },
    };
  },
  mounted() {
    this.fetchData(this.pager);
  },
  methods: {
    selectId() {
      getById(this.formInline.user).then((data) => {
        data.data.data.picturePath = this.$host + data.data.data.picturePath;
        this.tableData.splice(0, this.tableData.length, data.data.data);
        this.$message({
          type: "success",
          message: "查找成功!",
          center: true,
        });
      });
    },

    // 改变页码后，重新拉取数据
    handlePageIndexChange(val) {
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    // 改变页大小后，重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },

    //拉取数据的方法
    fetchData(pager) {
      GetPicture(pager).then((data) => {
        console.log(data);
        this.pager = data.data.data.pager;
        for (let i = 0; i < data.data.data.data.length; i++) {
          data.data.data.data[i].picturePath =
            this.$host + data.data.data.data[i].picturePath;
        }
        this.tableData = data.data.data.data;
      });
    },
    handleDelete(index, row) {
      //删除时执行的弹框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            center: true,
          });
          console.log(index, row);
          //根据id删除指定的行
          deleteId(row.id).then(() => {
            //删除数据后重新拉取数据
            this.fetchData(this.pager);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            center: true,
          });
        });
    },

    //文件上传成功时执行的钩子
    handleSuccess(response, file, fileList) {
      this.$message({
        type: "success",
        message: "上传成功!",
        center: true,
      });
      this.fetchData(this.pager);
      console.log(response, file, fileList);
    },

    //文件上传失败时执行的钩子
    handleError(err, file, fileList) {
      this.$message({
        showClose: true,
        message: "上传失败，请注意图片格式和大小！",
        type: "error",
        center: true,
      });
      console.log(err, file, fileList);
    },
    handleEdit(index, row) {
      let data = {
        PictureName: row.pictureName,
        PicturePath: row.picturePath,
        status: "展示",
      };
      updatePut(row.id, data).then(() => {
        this.fetchData(this.pager);
      });
    },
    handleStatus(index, row) {
      let data = {
        PictureName: row.pictureName,
        PicturePath: row.picturePath,
        status: "不展示",
      };
      console.log(row.picturePath);
      updatePut(row.id, data).then(() => {
        this.fetchData(this.pager);
      });
    },
  },
};
</script>
